<template>
    <div class="p1">
        <HouseLeftNavigation :navList="navList.data" :defaultClick="navList.defaultClick" @returnData="setPage">
        </HouseLeftNavigation>
        <div class="p2" v-for="(item, index) in navList.data" v-bind:key="item"
            :style="{ height: requestData.type == String(index - 1) ? '100%' : '', display: requestData.type == String(index - 1) ? '' : 'none', }">

            <div class="p3" v-if="requestData.type == String(index - 1)">
                <div class="p4">
                    <div>{{ item.name }}</div>
                    <div class="p7" v-if="index != 0">
                        <el-button round style="height: 28px;width: 80px;color: #aaa;border: 1px solid #aaa;"
                            v-show="isEdit" @click="cancel">{{ $t('text.House.l25') }}</el-button>
                        <el-button round style="height: 28px;width: 80px;color: #6698ff;border: 1px solid #6698ff;"
                            @click="save">{{ isEdit ? $t('text.House.l144') : $t('text.House.l26') }}</el-button>
                    </div>
                </div>
                <div class="p5">
                    <CommonPic :hit="$t('text.House.l27')" :id="this.$route.query.id" multiple :isEdit="isEdit" :isClear="isClear"
                        :typeId="this.requestData.type" :isUpload="isUpload" :defaultList="imageList" ref="CommonPic"
                        @return-data="getRequest" :moduleType="requestData.moduleType">
                    </CommonPic>
                </div>
            </div>

        </div>

    </div>
</template>
    
<script>
import { findPictureByHouseId } from '../../http/api'
import HouseLeftNavigation from '../../components/navigation/HouseLeftNavigation.vue';
import CommonPic from '../../components/input/CommonPic.vue'
export default {
    name: 'PictureVideoDetail',
    components: {
        HouseLeftNavigation,
        CommonPic: CommonPic
    },
    data() {
        return {
            isEdit: false,
            isUpload: false,
            isClear: false,
            navList: {
                defaultClick: this.$t('text.House.l17'), data: [
                    { name: this.$t('text.House.l17'), img: require('../../assets/images/h1.svg'), count: 2 },
                    { name: this.$t('text.House.l18'), img: require('../../assets/images/h2.svg'), count: 2 },
                    { name: this.$t('text.House.l235'), img: require('../../assets/images/h35.svg'), count: 2 },
                    { name: this.$t('text.House.l236'), img: require('../../assets/images/h36.svg'), count: 2 },
                    { name: this.$t('text.House.l237'), img: require('../../assets/images/h37.svg'), count: 2 },
                    { name: this.$t('text.House.l238'), img: require('../../assets/images/h3.svg'), count: 2 },
                    { name: this.$t('text.House.l239'), img: require('../../assets/images/h28.svg'), count: 2 },
                    { name: this.$t('text.House.l240'), img: require('../../assets/images/h38.svg'), count: 2 },
                    { name: this.$t('text.House.l241'), img: require('../../assets/images/h39.svg'), count: 2 },
                ]
            },
            index: 0,
            imageList: [],
            imageList2: [],
            requestData: {
                refId: this.$route.query.id,
                type: '-1',
                moduleType: '新房'
            },
        }
    },
    mounted() {
        this.init()
    },
    methods: {

        init() {
            findPictureByHouseId({ refId: this.$route.query.id, moduleType: '新房' }).then(res => {
                if (res !== undefined) {
                    this.imageList = res
                }
            }).catch()
        },

        save() {
            this.$nextTick(() => {
                if (this.isEdit) {
                    this.isUpload = !this.isUpload
                }
                this.isEdit = !this.isEdit
            });
        },
        cancel() {
            this.$nextTick(() => {
                if (this.isEdit) {
                    this.isClear = !this.isClear
                }
                this.isEdit = !this.isEdit
            });
        },

        setPage(index) {
            switch (index) {
                case 0: this.requestData.type = '-1'; this.init(); break;
                case 1: this.requestData.type = '0'; this.getRequest(); break;
                case 2: this.requestData.type = '1'; this.getRequest(); break;
                case 3: this.requestData.type = '2'; this.getRequest(); break;
                case 4: this.requestData.type = '3'; this.getRequest(); break;
                case 5: this.requestData.type = '4'; this.getRequest(); break;
                case 6: this.requestData.type = '5'; this.getRequest(); break;
                case 7: this.requestData.type = '6'; this.getRequest(); break;
                case 8: this.requestData.type = '7'; this.getRequest(); break;
            }
        },
        getRequest() {
            findPictureByHouseId(this.requestData).then(res => {
                if (res !== undefined) {
                    this.imageList = res
                    console.log(res)
                }
            }).catch()
        },
    },
    watch: {

    },
    computed: {
    }

}
</script>

<style scoped>
.p1 {
    width: 100%;
    display: flex;
    overflow: hidden;
    height: 100%;
}

.p2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding-right: 10px;
}

.p3 {
    margin-left: 35px;
    margin-right: 35px;
    display: flex;
    flex-direction: column;
    padding-bottom: 25px;
    border-bottom: 2px solid #eee;
    padding-top: 10px;
    height: 100%;
}

.p4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.p5 {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    height: 100%;
}

.p7 {
    display: flex;
}
</style>